<template>
  <div class="home-index-root">
    <div class="category-container">
      <div class="category-label">按类别查找</div>
      <div class="SortByCategory">
        <!-- 理工食堂按钮 -->
        <el-button type="primary" @click="toCanteen" @mouseenter="titlechange1" @mouseleave="titleback">
          <div class="button-content">
            <img alt="理工食堂" class="button-icon" src="../assets/CanteenShop.png">
            <span class="button-text">理工食堂</span>
          </div>
        </el-button>

        <!-- 理工教学楼按钮 -->
        <el-button type="primary" @click="toTeachingBuildingSelect" @mouseenter="titlechange3" @mouseleave="titleback">
          <div class="button-content">
            <img alt="自定义图标" class="button-icon" src="../assets/TeachingBuilding.png">
            <span class="button-text">理工教学楼/学院楼</span>
          </div>
        </el-button>

        <!-- 理工操场&运动场按钮 -->
        <el-button type="primary" @click="developing" @mouseenter="titlechange4" @mouseleave="titleback">
          <div class="button-content">
            <img alt="自定义图标" class="button-icon" src="../assets/Playground.png">
            <span class="button-text">理工操场/运动场</span>
          </div>
        </el-button>

        <!-- 舞萌/中二出勤按钮 -->
        <el-button type="success" @click="toMaimaiChunithmSelect" @mouseenter="titlechange5" @mouseleave="titleback">
          <div class="button-content">
            <img alt="自定义图标" class="button-icon" src="../assets/wmz2.jpg">
            <span class="button-text">舞萌/中二出勤</span>
          </div>
        </el-button>
      </div>
    </div>

    <div class="category-container">
      <div class="category-label">按热度查找 <span style="font-size: 16px">每1小时更新一次</span></div>
      <div class="tables-container">
        <!-- 食堂热度表格 -->
        <div class="table-wrapper">
          <h4 class="table-title" style="line-height: 30px">食堂热度排行</h4>
          <el-table
              :data="data.canteenTop10"
              class="clickable-table"
              stripe
              @row-click="(row) => toShopDetail(row.shopId)"
          >
            <el-table-column
                align="center"
                header-align="center"
                label="排名"
                width="80"
            >
              <template #default="scope">
        <span style="font-size: 18px; font-weight: bold;">  <!-- 添加样式 -->
            {{ scope.$index + 1 }}
        </span>
              </template>
            </el-table-column>
            <el-table-column
                label="店铺名称"
                prop="shopName"
                width="180"
            />
            <el-table-column
                label="浏览量"
                prop="shopView"
                sortable
            />

          </el-table>
        </div>

        <!-- 教学楼热度表格 -->
        <div class="table-wrapper">
          <h4 class="table-title" style="line-height: 30px">教学楼热度排行</h4>
          <el-table
              :data="data.teachingBuildingTop10"
              class="clickable-table"
              stripe
              @row-click="(row) => toTeachingBuildingDetail(row.contentId)"
          >
            <el-table-column
                align="center"
                header-align="center"
                label="排名"
                width="80"
            >
              <template #default="scope">
        <span style="font-size: 18px; font-weight: bold;">  <!-- 添加样式 -->
            {{ scope.$index + 1 }}
        </span>
              </template>
            </el-table-column>
            <el-table-column
                label="标题"
                prop="contentTitle"
                width="180"
            />
            <el-table-column
                label="浏览量"
                prop="contentView"
                sortable
            />
          </el-table>
        </div>

        <!-- 操场热度表格 -->
        <div class="table-wrapper">
          <h4 class="table-title" style="line-height: 30px">操场热度排行</h4>
          <el-table
              :data="data.playgroundTop10"
              class="clickable-table"
              stripe
              @row-click="(row) => toPlaygroundDetail(row.contentId)"
          >
            <el-table-column
                align="center"
                header-align="center"
                label="排名"
                width="80"
            >
              <template #default="scope">
        <span style="font-size: 18px; font-weight: bold;">  <!-- 添加样式 -->
            {{ scope.$index + 1 }}
        </span>
              </template>
            </el-table-column>
            <el-table-column
                label="标题"
                prop="contentTitle"
                width="180"
            />
            <el-table-column
                label="浏览量"
                prop="playgroundView"
                sortable
            />

          </el-table>
        </div>

        <!-- 舞萌/中二热度表格 -->
        <div class="table-wrapper">
          <h4 class="table-title" style="line-height: 30px">舞萌/中二热度排行</h4>
          <el-table
              :data="data.maimaiChunithmTop10"
              class="clickable-table"
              stripe
              @row-click="(row) => toMaimaiChunithmDetail(row.contentId)"
          >
            <el-table-column
                align="center"
                header-align="center"
                label="排名"
                width="80"
            >
              <template #default="scope">
        <span style="font-size: 18px; font-weight: bold;">  <!-- 添加样式 -->
            {{ scope.$index + 1 }}
        </span>
              </template>
            </el-table-column>
            <el-table-column
                label="机台名称"
                prop="shopName"
                width="180"
            />
            <el-table-column
                label="浏览量"
                prop="contentView"
                sortable
            />
          </el-table>
        </div>
      </div>
    </div>

    <div class="title">
      <h3 style="text-align: center">
        {{ data.title }}
      </h3>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router/index.ts";

const data = reactive({
  title: '声明：本网站是便于大家方便的查询理工信息的网站，本网站的信息仅供参考，具体情况以实际情况为准。',
  totalData: {
    userTotal: 0,
    canteenShopTotal: 0,
    teachingBuildingTotal: 0,
    playgroundTotal: 0,
    maimaiChunithmTotal: 0,
    recentEditTotal: 0,
    total: 0
  },
  canteenTop10: [],   // 食堂热度
  teachingBuildingTop10: [],  // 教学楼热度
  playgroundTop10: [],  // 操场热度
  maimaiChunithmTop10: []  // 舞萌/中二热度
});

// 获取统计数据
const fetchTotalData = () => {
  axios.get("/common/total").then(res => {
    if (res.data) {
      data.totalData = res.data.data;
    }
  }).catch(err => {
    console.error(err);
    ElMessage.error("获取统计数据失败");
  });
};

// 获取所有top10数据
const fetchAllTop10Data = async () => {
  try {
    // 食堂热度
    const canteenRes = await axios.get("/common/CStop10");
    if (canteenRes.data && canteenRes.data.data) {
      data.canteenTop10 = canteenRes.data.data;
    }

    // 教学楼热度
    const tbRes = await axios.get("/common/TBtop10");
    if (tbRes.data && tbRes.data.data) {
      data.teachingBuildingTop10 = tbRes.data.data;
    }

    // 操场热度
    const plRes = await axios.get("/common/PLtop10");
    if (plRes.data && plRes.data.data) {
      data.playgroundTop10 = plRes.data.data;
    }

    // 舞萌/中二热度
    const mcRes = await axios.get("/common/MCtop10");
    if (mcRes.data && mcRes.data.data) {
      data.maimaiChunithmTop10 = mcRes.data.data;
    }
  } catch (err) {
    console.error(err);
    ElMessage.error("获取热门数据失败");
  }
};

// 跳转到食堂详情页
const toShopDetail = (shopId) => {
  router.push({
    path: '/canteenShopDetail',
    query: {
      shopId: shopId
    }
  });
};

// 跳转到教学楼详情页
const toTeachingBuildingDetail = (contentId) => {
  router.push({
    path: '/teachingBuildingDetail',
    query: {
      contentId: contentId
    }
  });
};

// 跳转到操场详情页
const toPlaygroundDetail = (playgroundId) => {
  router.push({
    path: '/playgroundDetail',
    query: {
      playgroundId: playgroundId
    }
  });
};

// 跳转到舞萌/中二详情页
const toMaimaiChunithmDetail = (machineId) => {
  router.push({
    path: '/maimaiChunithmDetail',
    query: {
      mcId: machineId
    }
  });
};

// 路由跳转方法
const toCanteen = () => {
  router.push('/canteenShopSelect');
};
const toTeachingBuildingSelect = () => {
  router.push('/TeachingBuildingSelect');
};
const toMaimaiChunithmSelect = () => {
  router.push('/MaimaiChunithmSelect');
};
const developing = () => {
  router.push('/PlaygroundSelect');
};

// 标题变更方法
const titlechange1 = () => {
  data.title = '理工食堂';
};
const titlechange3 = () => {
  data.title = '理工教学楼和学院楼';
};
const titlechange4 = () => {
  data.title = '理工操场和运动场（包括球场等）开发中';
};
const titlechange5 = () => {
  data.title = '舞萌/中二出勤（仅限天津市内的舞萌和中二机台）';
};
const titleback = () => {
  data.title = '声明：本网站是便于大家方便的查询理工信息的网站，本网站的信息仅供参考，具体情况以实际情况为准。';
};

// 在页面加载时获取统计数据
fetchTotalData();
// 加载所有top10数据
fetchAllTop10Data();
</script>

<style scoped>
/* 新增容器样式 */
.category-container {
  position: relative;
  border: 4px solid black;
  border-radius: 8px;
  padding: 20px;
  padding-top: 40px;
  margin-bottom: 20px;
}

/* 类别标签样式 */
.category-label {
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  background-color: #e9eef3;
  padding: 0 10px;
  color: black;
  font-weight: bold;
  font-size: 25px;
  line-height: 20px;
}

.title {
  display: flex;
  text-align: center;
  align-items: center;
  line-height: 20px;
  justify-content: center;
}

.el-button {
  width: 100%;
  height: 150px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.el-button:hover {
  background-color: #b3c0d1;
}

.SortByCategory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.button-icon {
  width: 100px;
  height: auto;
  margin-bottom: 10px;
}

.button-text {
  font-size: 15px;
  display: block;
  text-align: center;
}

/* 表格容器样式 */
.tables-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 修改为自适应列 */
  gap: 15px;
  width: 100%;
  overflow-x: hidden; /* 隐藏X轴滚动条 */
}

.table-wrapper {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  background-color: #fff;
  width: 100%; /* 确保表格宽度占满容器 */
}

.table-title {
  margin: 0 0 10px 0;
  text-align: center;
  color: #409eff;
}

/* 表格样式调整 */
.clickable-table {
  cursor: pointer;
  width: 100%;
}

.clickable-table:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 调整表格行高 */
:deep(.el-table__row) {
  height: 50px;
}

/* 调整排名列样式 */
:deep(.el-table__cell) {
  text-align: center;
}


/* 响应式调整 - 在中等屏幕上改为两列布局 */
@media (max-width: 1200px) {
  .tables-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 响应式调整 - 在更小的屏幕上改为单列布局 */
@media (max-width: 768px) {
  .tables-container {
    grid-template-columns: 1fr;
  }
}

/* 暗黑模式下的样式 */
[data-theme="dark"] .category-container {
  border-color: white; /* 边框变为白色 */
}

[data-theme="dark"] .category-label {
  background-color: black; /* 标签背景变为黑色 */
  color: white; /* 标签字体变为白色 */
}

[data-theme="dark"] .title {
  color: white; /* 标题字体变为白色 */
}

[data-theme="dark"] .el-button {
  color: white; /* 按钮字体变为白色 */
}

[data-theme="dark"] .el-button:hover {
  background-color: #666; /* 按钮悬停背景变为深灰色 */
}

[data-theme="dark"] .table-wrapper {
  border-color: white; /* 表格边框变为白色 */
  background-color: #333; /* 表格背景变为深灰色 */
  color: white; /* 表格字体变为白色 */
}

[data-theme="dark"] .clickable-table {
  background-color: #333; /* 表格背景变为深灰色 */
  color: white; /* 表格字体变为白色 */
}

[data-theme="dark"] .clickable-table:hover {
  box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1); /* 悬停时的阴影变为白色 */
}

/* 添加过渡效果 */
[data-theme="dark"],
[data-theme="light"] {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* 添加过渡效果 */
}
</style>